iT邦幫忙

2022 iThome 鐵人賽

DAY 8
0

目前功能只剩下讓蛇能自動移動,而非只靠鍵盤。

為了達到此目標,我們會需要用到setInterval(func, time(ms)[param1, param2,...]),此function的功能是每間隔設定的時間,會去執行給定的function,如果function有參數的話,則從setInterval的第三個參數傳入。

由此,我們寫一個更新位置的function,並利用setInterval,在每個間隔時間內去更新。

更新位置的方法,其實從上篇即可得知。只是上篇是按下鍵盤後算出下一個位置。
這個是直接在function內,根據目前的移動方向,即可算出下一步的位置,並透過canvas畫出
要注意的是,所有利用鍵盤移動後,要檢查的項目,在自動移動也都要檢查
=> 是否超界、碰到身體、吃到食物?

網上可以看到許多 setInterval 的限制,若有興趣可參考此篇文章
JavaScript-setTimeout/setInterval

這個遊戲就在此告一段落(完整程式碼),有時間會陸續優化或是美化界面,目前看起來非常陽春。
想到可改善的地方:

  1. 加個記分板
  2. 蠻多類似的code,再包成function
  3. 蛇頭的部分跟蛇身用不同顏色區分,並微調一下配色XD
  4. 隨著分數增加,或時間增加,加快蛇的移動速度
  5. 既然都可以自動行走了,可以考慮加個全程自動化,看到障礙物就轉方向,看可以自動玩多久

上一篇
貪食蛇 - 鍵盤移動
下一篇
打磚塊(block) - 前言
系列文
那些八年級生的經典迷你遊戲,前端JS自學之路20
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言